<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Radio Group - Form</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Radio Group - Form</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content class="outer-content">
        <form>
          <ion-list>
            <ion-radio-group name="tannen" id="group" value="biff">
              <ion-list-header>
                <ion-label>Luckiest Man On Earth</ion-label>
              </ion-list-header>

              <ion-item>
                <ion-label
                  >Biff
                  <span id="biff"></span>
                </ion-label>
                <ion-radio value="biff" slot="start"></ion-radio>
              </ion-item>

              <ion-item>
                <ion-label
                  >Griff
                  <span id="griff"></span>
                </ion-label>
                <ion-radio value="griff" slot="start"></ion-radio>
              </ion-item>

              <ion-item>
                <ion-label
                  >Buford
                  <span id="buford"></span>
                </ion-label>
                <ion-radio value="buford" slot="start"></ion-radio>
              </ion-item>

              <ion-item>
                <ion-label>George</ion-label>
                <ion-radio value="george" disabled slot="start"></ion-radio>
              </ion-item>

              <ion-item>
                <ion-button type="submit">Submit</ion-button>
              </ion-item>
            </ion-radio-group>
          </ion-list>
        </form>

        <p style="margin: 20px">
          Value:
          <span id="value"></span>
        </p>

        <p style="margin: 20px">
          Changes:
          <span id="changes">0</span>
        </p>
      </ion-content>

      <style>
        .outer-content {
          --background: #f2f2f2;
        }
      </style>
      <script>
        var changes = 0;

        document.getElementById('group').addEventListener('ionChange', function (ev) {
          document.getElementById('value').textContent = ev.detail.value;
          changes++;
          document.getElementById('changes').textContent = changes;
        });

        var biff = 0;
        document.querySelector('[value="biff"]').addEventListener('ionSelect', function (ev) {
          biff++;
          document.getElementById('biff').textContent = biff;
        });

        var griff = 0;
        document.querySelector('[value="griff"]').addEventListener('ionSelect', function (ev) {
          griff++;
          document.getElementById('griff').textContent = griff;
        });

        var buford = 0;
        document.querySelector('[value="buford"]').addEventListener('ionSelect', function (ev) {
          buford++;
          document.getElementById('buford').textContent = buford;
        });
      </script>
    </ion-app>
  </body>
</html>
